<template>
  <div class="HeaderNav">
    <span>{{ SITECONF.name }}</span>
  </div>
</template>

<script setup>
import SITECONF from "../../conf/siteconf.json";
</script>
<style scoped>
span {
  font-size: 35px;
  font-weight: bolder;
  color: rgb(255, 255, 255);
  text-shadow: 3px 3px #555555;
}
.HeaderNav {
  height: 100%;
  text-align: center;
}
.HeaderNav {
  background-clip: text, padding-box;
  background: -webkit-linear-gradient(
    135deg,
    #0eaf6d,
    #a3407d,
    #147b96,
    #e6d205,
    #2cc4e0,
    #3e0570,
    #ff6384,
    #0eaf6d
  );
  /* 文字颜色填充设置为透明 */
  /* 背景裁剪，即让文字使用背景色 */
  /* 背景图放大一下，看着柔和一些 */
  -webkit-background-size: 500%;
  background-size: 500%;
  /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
  -webkit-animation: flowCss 50s infinite linear;
  animation: flowCss 50s infinite linear;
}

@-webkit-keyframes flowCss {
  0% {
    /* 移动背景位置 */
    background-position: -1% 0;
  }

  100% {
    background-position: -499% 0;
  }
}
/*
.HeaderNav:hover {
  -webkit-animation: flowCss 35s infinite linear;
  animation: flowCss 35s infinite linear;
}
*/
</style>
